---
/* ----------  Type & Props ---------- */
import type { ImageMetadata } from 'astro';

export interface Props {
  /** 背景文字；若同时传 bgImage 将被隐藏 */
  bgText?: string;
  /** 背景图片，可为字符串 URL 或 Astro Assets 的 ImageMetadata */
  bgImage?: string | ImageMetadata;
  title?: string;
  tooltipText?: string;
}

/* ----------  Props with default ---------- */
const {
  bgText = 'HOME',
  bgImage = '', // string | ImageMetadata | ''
  title = 'Welcome to Ice',
  tooltipText = '这是一个现代、响应式、功能丰富的 Astro 博客主题，支持暗黑/明亮模式和自定义选项',
} = Astro.props;

/* ----------  Derive real URL ---------- */
const bgUrl = typeof bgImage === 'string' ? bgImage : bgImage?.src ?? '';
---

<section
  class="hero-theme-card"
  style={bgUrl && `background:url(${bgUrl}) center/cover no-repeat;`}
>
  {/** 仅在未传背景图且有文字时渲染文字背景 */}
  {(!bgUrl && bgText) && <div class="hero-bg-text">{bgText}</div>}

  <div class="hero-foreground-card">{title}</div>

  <div class="floating-info">
    <div class="info-btn">
      <svg width="24" height="24" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10" stroke="#fff" fill="#555" />
        <line x1="12" y1="8" x2="12" y2="12" />
        <circle cx="12" cy="16" r="1" />
      </svg>
    </div>
    <div class="info-tooltip">{tooltipText}</div>
  </div>
</section>

<style>
  .hero-theme-card {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #f7f8fa 60%, #fff 100%);
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
  }

  .hero-bg-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    font-weight: 900;
    color: #ccbef1;
    letter-spacing: 0.1em;
    user-select: none;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
  }

  .hero-foreground-card {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    background: #555;
    color: #fff;
    border-radius: 16px;
    padding: 18px 38px;
    font-size: 2rem;
    font-weight: bold;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: min-content;
    max-width: 100%;
    white-space: nowrap;
    line-height: 1.2;
  }

  @media (max-width: 600px) {
    .hero-theme-card {
      height: 180px;
    }
    .hero-bg-text {
      font-size: 3rem;
    }
    .hero-foreground-card {
      font-size: 1.5rem;
      padding: 10px 18px;
    }
  }

  .floating-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .info-btn {
    width: 44px;
    height: 44px;
    background: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.13);
    cursor: pointer;
    transition: background 0.18s;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 10;
  }
  .info-btn:hover {
    background: #0070f3;
  }
  .info-tooltip {
    opacity: 0;
    pointer-events: none;
    background: #555;
    color: #fff;
    border-radius: 12px;
    padding: 15px 12px;
    font-size: 1rem;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.13);
    width: 320px;
    transition: opacity 0.18s, transform 0.18s;
    transform: translateY(10px);
    white-space: pre-line;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 40px;
    z-index: 10;
    line-height: 1.6;
  }
  .info-btn:hover + .info-tooltip,
  .info-btn:focus + .info-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
</style>
